<template>
  <div ref="list" class="kkb-list-container" @scroll="scrollEvent($event)">
    <div class="kkb-list-phantom" :style="{ height: listHeight + 'px'}"></div>
    <div class="kkb-list" :style="{ top: getTop }">
      <ArticleItem
        class="kkb-list-item"
        v-for="article in visibleData"
        :key="article._id"
        :article="article"
        :style="{ height: size + 'px'}"
      >
      </ArticleItem>
    </div>
  </div>
</template>

<script>
import ArticleItem from './ArticleItem.vue'
export default {
  components: {
    ArticleItem
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    size: {
      type: Number,
      default: 200
    }
  },
  data () {
    return {
      screenHeight: 800,
      startOffset: 0,
      start: 0, // 开始的索引
      end: 4 // 结束的索引
    }
  },
  computed: {
    listHeight () {
      return this.listData.length * this.size
    },
    getTop () {
      return `${this.startOffset}px`
    },
    visibleCount () {
      return Math.ceil(this.screenHeight / this.size)
    },
    visibleData () {
      return this.listData.slice(this.start, Math.min(this.end, this.listData.length))
    }
  },
  mounted () {
    this.end = this.start + this.visibleCount
  },
  methods: {
    scrollEvent () {
      const scrollTop = this.$refs.list.scrollTop
      this.start = Math.floor(scrollTop / this.size)
      this.end = this.start + this.visibleCount
      this.startOffset = scrollTop - (scrollTop % this.size)
    }
  },
}
</script>

<style lang="stylus" scoped>
  .kkb-list-container
    height 100%
    overflow auto
    position relative
    .kkb-list-phantom
      position absolute
      left 0
      top 0
      right 0
      z-index -1
    .kkb-list
      position absolute
      left 0
      top 0
      right 0
    .kkb-list-item
      padding 10px
      color #555
      border-bottom 1px solid #999
</style>
